<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom操作</title>
</head>
<body>

<img id="light" src="img/off.gif"> <br>

<div class="cls">传智教育</div>   <br>
<div class="cls">黑马程序员</div> <br>

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>

<script>
    // 1.getElementById：根据id属性值获取，返回一个Element对象
    let img = document.getElementById("light");
    // alert(img);

    // 2.getElementsByTagName：根据标签名称获取，返回Element对象数组
    // innerHTML：设置元素内容
    let divs = document.getElementsByTagName("div");
    // alert(divs);
    /*for (let d of divs) {
        alert(d);
    }*/

    // 3.getElementsByName：根据name属性值获取，返回Element对象数组
    let hobbies = document.getElementsByName("hobby");
    // alert(hobbies);
    /*for (let hobby of hobbies) {
        // alert(hobby);
        hobby.checked = true; // 相当于HTML标签中的checked="checked"属性
    }*/
    hobbies[1].checked = true; // 处理一个

    // 4.getElementsByClassName：根据class属性值获取，返回Element对象数组
    let cls = document.getElementsByClassName("cls");
    // alert(cls);
    for (let cl of cls) {
        cl.innerHTML = "广州黑马";  // innerHTML修改标签的主体内容
    }
</script>
</body>
</html>